<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<head>
  <title>标准柱状图</title>
  <link class="codestyle" rel="prefetch alternate stylesheet" href="${ctx}/assets/admin/LingUI/highlight/styles/tomorrow.css"/>
</head>

<div class="row">
  <div class="col-xs-12">
    <div id="std_bar_div" class="col-lg-12" style="height: 400px"></div>
  </div>
  <div class="col-xs-12">
    <pre><code class="java">
      @RequestMapping(value = "/bar/std",method = RequestMethod.POST)
      @ResponseBody
      public ModelMap genStdBarChart(){

      ModelMap modelMap = new ModelMap();

      Option option = new Option();
      option.title().text("某地区蒸发量和降水量");
      option.tooltip().trigger(Trigger.axis);
      option.legend("蒸发量", "降水量");
      option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar).show(true),
      Tool.restore, Tool.saveAsImage);
      option.calculable(true);
      option.xAxis(new CategoryAxis().data("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"));
      option.yAxis(new ValueAxis());

      Bar bar = new Bar("蒸发量");
      bar.data(2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3);
      bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值"));
      bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));

      Bar bar2 = new Bar("降水量");
      List<Double> list = Arrays.asList(2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3);
      bar2.setData(list);
      bar2.markPoint().data(new PointData("年最高", 182.2).xAxis(7).yAxis(183).symbolSize(18), new PointData("年最低", 2.3).xAxis(11).yAxis(3));
      bar2.markLine().data(new PointData().type(MarkType.average).name("平均值"));

      option.series(bar, bar2);

      modelMap.addAttribute(Constants.DEFAULT_SUCCESS_KEY,Boolean.TRUE);
      modelMap.addAttribute("data", GsonUtil.format(option));

      return modelMap;
      }
    </code></pre>
  </div>
</div>
<script type="text/javascript">

  var scripts = [null,
    "${ctx}/assets/admin/LingUI/echarts/echarts-all.js",
    "${ctx}/assets/admin/LingUI/highlight/highlight.pack.js",
    null];

  ace.load_ajax_scripts(scripts, function() {

    hljs.initHighlightingOnLoad();

    $(document).ready(function() {
      $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    });

    var chart = echarts.init(document.getElementById('std_bar_div'));
    chart.clear();
    chart.showLoading({text: '正在努力的读取数据中...'});

    $.ajax({
      type : 'POST',
      url : '${ctx}/${frameworkPath}/charts/bar/std',
      traditional : true,
      dataType:'json',
      success : function(message) {
        if(message.success){
          chart.setOption(JSON.parse(message.data));
          chart.hideLoading();
        }
        else{
          lui.fail('error');
        }
      }
    });
  });
</script>